<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件一 组件通信  子向父传递</title>
</head>
<body>
<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num" @inc="jia" @dec="jian"></counter>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:'\
            <div>\
                <button @click="plus">加</button>  \
                <button @click="reduce">减</button>  \
            </div>',
        props:['num'],// count是从父组件获取的。
        methods:{
            plus:function(){
                this.$emit("inc");
            },
            reduce:function(){
                this.$emit("dec");
            }
        }
    })

    var app =new Vue({
        el:"#app",
        data:{
            num:0,
        },
        methods:{
           jia:function(){
              this.num++;
           },
            jian:function(){
                this.num--;
            }
        }


    });
</script>
</html>